<template>
	<view class="signPage">
		<view class="flexCell">
			<img v-if="Sign" :src="Sign" alt="" class="imgSignature" />
			<view v-else class="">
				暂无设置签名
			</view>
		</view>
		<button class="setBtn" @click="$refs.popup.open()">设置签名</button>
		<uni-popup ref="popup" background-color="#fff" type="bottom" :is-mask-click="false">
			<Sign ref="sign" @finish="signFinish" @close="signClose" />
		</uni-popup>
	</view>
</template>

<script>
	import Sign from '@/components/sign.vue'
	export default {
		components: {
			Sign
		},
		data() {
			return {
				Sign: '',
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo.sign) this.Sign = this.userInfo.sign
		},
		methods: {

			signFinish(src) {
				uni.request({
					url: this.$veriUrl + '/auth/VeriRecord/SaveVeriSign',
					method: 'POST',
					data: {
						...this.userInfo,
						sign: src
					}
				}).then(result => {
					let [err, res] = result;
					if (res.data.code == 200) {
						// let data = res.data.data
						this.userInfo.Sign = src
						this.Sign = src
					} else {
						uni.showToast({
							title: '设置失败',
							icon: "none"
						});
					}
				})
				this.$refs.popup.close()
			},
			signClose() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.signPage {
		padding: 30px;

		.flexCell {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 180px;
			overflow: hidden;
			width: 100%;

			.imgSignature {
				transform: rotate(-90deg);
				width: 160px;
			}
		}

		.setBtn {
			position: absolute;
			bottom: 100px;
			left: 30px;
			width: calc(100% - 60px);
		}
	}
</style>